<script type="text/javascript" src="lib/jquery-1.7.2.js"></script>
<script type="text/javascript" src="lib/profile.js"></script>
<script type="text/javascript" src="lib/jquery.dataTables.js"></script>
<script type="text/javascript" src="lib/jquery.contextmenu.r2.js"></script>
<script type="text/javascript" src="lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/jquery.blockUI.js"></script>
<link rel="stylesheet" type="text/css" href="css/demo_table_jui.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables_themeroller.css" />
<link rel="stylesheet" type="text/css" href="css/bookshop.css" />
<style>
    .bkButton{
        width: 220px;
        height:45px;
        cursor: pointer;
        background: #3D9DB3;
        padding: 8px 5px;
        font-family: "Comic Sans MS", cursive, sans-serif;
        color: white;
        font-size: 24px;
        border: 1px solid #1C6C7A;
        margin-bottom: 10px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
            0px 0px 0px 3px rgb(254, 254, 254),
            0px 5px 3px 3px rgb(210, 210, 210);
        -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
            0px 0px 0px 3px rgb(254, 254, 254),
            0px 5px 3px 3px rgb(210, 210, 210);
        box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
            0px 0px 0px 3px rgb(254, 254, 254),
            0px 5px 3px 3px rgb(210, 210, 210);
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
    .createBookTitle1{
        padding: 10px 30px 10px 10px;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-weight: normal;
        font-size: 30px;
        cursor: pointer;
    }
    .createBookTitle2{
        padding: 10px 30px 10px 10px;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-weight: normal;
        font-size: 20px;
        cursor: pointer;
    }

</style>

<html>
    <title>Alanbots Book Shop</title>

    <table align="left">
        <tr style="font-size: 20px;">
            <td><b>You Have <input type="image" src="images/ip.png" name="ipImage" width="15" height="15"></b></td>
            <td><b><label id="currentIPS"/></b></td>
            <td><b>&nbsp;Intelligent Points.</b></td>
        </tr>
    </table>

    <table align="right">
        <tr>
            <td></td>
            <td></td>
            <td>
                <input class="bkButton" type="button" id="buyButton" name="Buy Points" value="Buy Points Now!" onclick="buy()" /><br>
                <input class="bkButton" type="button" id="createBook" name="Create" value="Create Your Book!" onclick="popup()" />
            </td>
        </tr>
    </table>

    <br><br><br><br><br>

    <body>
        <div>
            <img id="book_clickLeft" src="./images/left1.gif" height="60" width="80" style="margin-right:120px"/>
        </div>
        <div class="title" style="text-align:center;">
            <font size="10"><b>Alanbots' Book Shop</b></font>
        </div>
        <div class="row">
            <b class="rtop">
                <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
            </b>
        </div><br><br>

        <div id="row" class="ex_highlight_row">

            <div class="row" align="center">
                <table>
                    <tr>
                        <th width=""><img class="" src="images/ListView.png"/></th>
                        <th width=""><img class="" src="images/Arrow1.gif"/></th>
                        <th width=""><img class="" src="images/brand_icon_store.png"/></th>
                        <th width=""><img class="" src="images/Arrow1.gif"/></th>
                        <th width=""><img class="" src="images/money.png"/></th>
                    </tr>
                    <tr>
                        <td width=""><b style="font-size: 20px;">View list</b></td>
                        <td width=""></td>
                        <td width=""><b style="font-size: 20px;">Select books</b></td>
                        <td width=""></td>
                        <td width=""><b style="font-size: 20px;">Go payment</b></td>
                    </tr>
                </table>
            </div>


            <table border="0" id="resultsTable" class="display">

            </table>

        </div>

        <div id="popup" style="display:none">
            <table align="center">
                <tr><td><div class="createBookTitle1">Here Create Your Book! </div></td></tr>
                <tr><td><div class="createBookTitle2">1.Please Enter Your Book Name and Type.<br>2.Then Fill in Your Question and Answer Below:</div></td></tr>
                <input type="hidden" id="QANum" value = 1>
            </table>
            <table id="createBookTable" class="display">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody >
                    <tr class="gradeU">
                        <td  id="" ></td>
                        <td  id="" >Book Name: <input id="bkName" type="text" name="book name" size="40" value=""/></td>
                        <td  id="" >Book Type: <input id="bkType" type="text" name="book type" size="40" value="Academic" disabled/></td>
                    </tr>
                    <tr class="gradeU">
                        <td  id="" ><img class="add" id="p1" alt="Add new QA"  name="Add"  src= "images/plus.png" onclick="fnClickAddRow(this)"/></td>
                        <td  id="" >Question:  &nbsp;<input id="q1" type="text" name="question" size="40" value=""/></td>
                        <td  id="" >Answer:   &nbsp;&nbsp;&nbsp;<input id="a1" type="text" name="answer" size="40" value=""/></td>
                    </tr>                    
                </tbody>
            </table>
            <br><br><br>
            <input class="bkButton" type="button" id="add" name="add" value="Submit" />
            <input class="bkButton" type="button" id="cancel" name="cancel" value="Cancel" />
        </div>

        <br><br><br><br><br><br>
        <b class="rbottom">
            <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
        </b>        
    </body>

    <script>    	
        var bookListTable;
        var uTable;
        var data;        
        var bookName = "";
        var bookType = "";

        //dataTable
        $(document).ready(function() {
            uTable = $('#createBookTable').dataTable( {
                "bFilter": false,
                "bSort": false,
                "bInfo": false,
                "sPaginationType": "full_numbers",
                "bLengthChange": false,
                "iDisplayLength": 5
            } );
            
            if(userProfile == null){
                $.ajax({
                    type:"GET",
                    url:"index/getuser",
                    async:true,
                    beforeSend:function loading(){
                    },
                    success:function(v){
                        var data = window.JSON.parse(v);
                        userProfile = data.data;
                        $('#currentIPS').append('<div id="myID">'+userProfile.account.points+'</div>');
                    },
                    error:function(){
                    }
                });
            }
            $.ajax({
                type:"GET",
                url:"index/getbooklist",
                async:true,
                beforeSend:function loading(){
                },
                success:function(v){
                    data = window.JSON.parse(v);
                    appendTable(data);                   
                },
                error:function(){
                }
            });
            
            // return to street
            
            $("#book_clickLeft").mouseover(function(){
                $("#book_clickLeft").attr("src","./images/left.gif");
            });
            $("#book_clickLeft").mouseout(function(){
                $("#book_clickLeft").attr("src","./images/left1.gif");
            });
            $("#book_clickLeft").click(function(){
                window.location.href = "alanstreet.html";
            });
            
            function appendTable(){
                var type = "";
                if(data == null)
                	return;
                if(data[0]["booktype"] == 1){
                    type = "Academic";
                }
                $('#resultsTable').append('<thead>\n\
                <th></th>\n\
                <th><font size="4"><b>Book Name</b></font></th>\n\
                <th><font size="4"><b>Author</b></font></th>\n\
                <th><font size="4"><b>Book Type</b></font></th>\n\
                <th><font size="4"><b>Details</b></font></th>\n\
                <th><font size="4"><b>Price</b></font></th>\n\
                <th><font size="4"><b>Action</b></font></th>\n\
                <th style="display: none"></th>\n\
                <tbody>\n\
                <tr class="gradeU">\n\
                <td align="center"><input type="image" src="images/book.png" name="image" width="60" height="60" onclick="event.cancelBubble = true;"></td>\n\
                <td align="center">'+data[0]["name"]+'</td>\n\
                <td align="center">'+data[0]["authorname"]+'</td>\n\
                <td align="center">'+type+'</td>\n\
                <td align="center"><img alt="book details" src="images/details_open.png"/></td>\n\
                <td align="center"><input type="image" src="images/ip.png" name="ipImage" width="15" height="15" onclick="event.cancelBubble = true;"> '+data[0]["price"]+'</td>\n\
                <td align="center"><input type="button" name="buy" value="Buy"style="width: 50px; height: 40px;"></td>\n\
                <td style="display: none">'+data[0]["id"]+'</td>\n\
                </tr>\n\
                </tbody>\n\
                </thead>');

                for (var i=1;i<data.length;i++){
                    if(data[i]["booktype"] == 1){
                        type = "Academic";
                    }
                    $('#resultsTable tr:last').after('<tr class="gradeU">\n\
                    <td align="center"><input type="image" src="images/book.png" name="image" width="60" height="60" onclick="event.cancelBubble = true;"></td>\n\
                    <td align="center">'+data[i]["name"]+'</td>\n\
                    <td align="center">'+data[i]["authorname"]+'</td>\n\
                    <td align="center">'+type+'</td>\n\
                    <td align="center"><img alt="book details" src="images/details_open.png"/></td>\n\
                    <td align="center"><input type="image" src="images/ip.png" name="ipImage" width="15" height="15" onclick="event.cancelBubble = true;"> '+data[i]["price"]+'</td>\n\
                    <td align="center"><input type="button" name="buy" value="Buy"style="width: 50px; height: 40px;"></td>\n\
                    <td style="display: none">'+data[i]["id"]+'</td>\n\
                    </tr>');
                }
                bookListTable = $('#resultsTable').dataTable( {
                    "aaSorting": [[ 2, "desc" ]],
                    "aLengthMenu": [ 5, 10, 15, 20 ],
                    "sPaginationType": "full_numbers",
                    "bLengthChange": true,
                    "iDisplayLength": 5,
                    "ServerSide": true,
                    "bProcessing": true,
                    "bSortClasses": false
                } );
                
                $('tr', bookListTable.fnGetNodes()).hover( function() {
                    var iCol = $('td').index(this) % 5;
                    var nTrs = bookListTable.fnGetNodes();
                    $('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
                }, function() {
                    $('tr.highlighted', bookListTable.fnGetNodes()).removeClass('highlighted');
                } );
            }
        } );

        $('#resultsTable tbody td img').live( 'click', function () {

            var nTr = this.parentNode.parentNode;
            if ( this.src.match('details_close') )
            {
                /* This row is already open - close it */
                this.src = "images/details_open.png";
                bookListTable.fnClose( nTr );
            }
            else
            {
                /* Open this row */
                this.src = "images/details_close.png";
                fnFormatDetails(nTr);

            }
        } );


        $('#resultsTable tbody td input').live( 'click', function () {
            var nTr = this.parentNode.parentNode;
            var aData = bookListTable.fnGetData(nTr);
            var price = aData[5].substring(115);
            var bookId = aData[7];
            var actionType = 2;
            var purchaseType = 1;
            var purchaseNumber = 1;
            
            if(userProfile.account.points*1 < price) {
                alert("Not sufficient funds");
                return;
            }
            $.ajax({
                type:"GET",
                url:"index/purchase/objectId/"+ bookId + "/actionType/" + actionType + "/purchaseType/" + purchaseType + "/purchaseNumber/" + purchaseNumber,
                async:true,
                beforeSend:function loading(){
                },
                success:function(v){
                	result = window.JSON.parse(v);
                    if(result.success) {
                        alert("succeed!");
                        $.ajax({
                			type:"GET",
                			url:"index/getuser",
                			async:true,
                			beforeSend:function loading(){
                			},
                			success:function(v){
                				var data = window.JSON.parse(v);
                				userProfile = data.data;
                				document.getElementById("myID").innerHTML = userProfile.account.points; 
                			},
                			error:function(){				
                			}
                		});
                    }
                    
                },
                error:function(){
                }
            });

        } );

        function fnFormatDetails ( nTr )
        {
            var aData = bookListTable.fnGetData( nTr );
            var bookID = aData[7];
            var sOut;
            var bookdetail;
            var content = "";

            for(var i =0; i< data.length; i++){
                if(bookID == data[i]["id"]){
                    bookdetail = data[i]["content"];
                }
            }
            var s = bookdetail.split("XXX");
            for(var i = 0; i < s.length; i++) {
            	var k = s[i].split("III");
            	content += "Q: "+k[0] + "<p>";
            	content += "A: "+k[1] + "<p>";
            }
            

            sOut = '<div class="inset_table">';
            sOut = '<table cellpadding="1" cellspacing="1" border="0" style="padding-left:40px;">';
            sOut += '<tr><td>Abstract:</td><td></td><td></td><td><b>'+content+'</b></td></tr>';
            sOut += '</table>';
            sOut += '</div>';

            bookListTable.fnOpen( nTr, sOut , 'details' );
        }

        function buy(){
            window.location.href="alanbank.html";
        }
        function popup(){        	
           
            $.blockUI({
                message: $('#popup'),
                showOverlay: true,
                centerY: true,
                css: {
                    top:  ($(window).height() - 500) /2 + 'px',
                    left: ($(window).width() - 500) /2 + 'px',
                    width:'',
                    height:'',
                    margin:'50px 10px',
                    padding: '5px',
                    color: 'black'
                }
            });
            $("#add").unbind();
            $('#add').click(function() {
            	bookName = document.getElementById('bkName').value;
                bookType = document.getElementById('bkType').value;               
                var QANum = document.getElementById('QANum').value;
                var content = "";
                for(var i=1;i <= QANum;i++) {
                	var question = document.getElementById('q'+i).value;
                    var answer = document.getElementById('a'+i).value;
                    content += question + "III" + answer;
                    if(i != QANum)
                    	content += "XXX";
                    
                }
                //window.JSON.stringify
                
                $.ajax({
                    type:"GET",
                    url:"index/createbook/type/"+ 1 + "/bookaction/" + 1 + "/bookName/" + bookName + "/content/" + content,
                    async:true,
                    beforeSend:function loading(){
                    },
                    success:function(v){
                        result = window.JSON.parse(v);
                        if(result.success) {
                        	alert("The book you created has been submitted successful, Please wait for administrator to verify.");
                        	var aTrs = uTable.fnGetNodes();
                            for ( var i=1; i<aTrs.length; i++ ){
                                uTable.fnDeleteRow(i,true);
                                uTable.fnClearTable();
                            }
                            document.getElementById('QANum').value = 1;
                            $('#createBookTable').dataTable().fnAddData([
                                                                         '<td  id="" ></td>',
                                                                         '<td  id="" >Book Name: <input id="bkName" type="text" name="book name" size="40" value=""/></td>',
                                                                         '<td  id="" >Book Type: <input id="bkType" type="text" name="book type" size="40" value="Academic" disabled/></td>']);

                           $('#createBookTable').dataTable().fnAddData([
                               '<img class="add" id="p1" alt="Add new QA"  name="Add"  src= "images/plus.png" onclick="fnClickAddRow(this)"/>',
                               '<p>Question:&nbsp;&nbsp;<input id="q1" type="text" name="question" size="40" value=""/></p>',
                               '<p>Answer: &nbsp;&nbsp;&nbsp;<input id="a1" type="text" name="answer" size="40" value=""/></p>']);
                        }
                        
                    },
                    error:function(){
                    }
                });               
                               
                $.unblockUI();
            });
            $('#cancel').click(function() {

                questionArray = new Array();
                answerArray = new Array();

                $.unblockUI();
                return false;
            });
        }

        function fnClickAddRow(control) {
            var question="";
            var answer="";
            var QANum = document.getElementById('QANum').value;
            QANum = QANum*1 + 1
        	document.getElementById('QANum').value = QANum;           
                        
            $('#createBookTable').dataTable().fnAddData([
                '<img class="add" id="p'+QANum+'" alt="Add new QA"  name="Add"  src= "images/plus.png" onclick="fnClickAddRow(this)"/>',
                '<p>Question:&nbsp;&nbsp;<input id="q'+QANum+'" type="text" name="question" size="40" value=""/></p>',
                '<p>Answer:  &nbsp;&nbsp;&nbsp;<input id="a'+QANum+'" type="text" name="answer" size="40" value=""/></p>']);

        }        
    </script>
</html>